<template>
  <el-dialog
    v-model="dialogVisible"
    title="查看事项"
    width="70%"
    :before-close="close"
    :close-on-click-modal="false"
    append-to-body
  >
    <el-scrollbar ref="scrollbarRef" max-height="60vh" v-loading="loading">
      <ThingShowForm ref="thingShowForm" />
    </el-scrollbar>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="close">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { nextTick, ref, useTemplateRef } from 'vue'
import ThingShowForm from '@/components/thing/ThingShowForm.vue'

const thingShowForm =
  useTemplateRef<InstanceType<typeof ThingShowForm>>('thingShowForm')

const dialogVisible = ref(false)
const loading = ref(false)

defineExpose({ show })

function show(rowId: number) {
  dialogVisible.value = true
  nextTick(async () => {
    loading.value = true
    await thingShowForm.value.show(rowId)
    loading.value = false
  })
}

function close() {
  dialogVisible.value = false
  loading.value = false
  thingShowForm.value.close()
}
</script>

<style scoped lang="scss"></style>
